LOLMatrix.playersDetail=(function(){

    /*价格走势--提示项语言*/
   var  lineOptsLang={
       'en':'{b} Games：{c}',
       'zh-CN':'第 {b} 局：{c}',
       'zh-TW':'第 {b} 局：{c}'
    };


    return {
        /*实力总览*/
        radarBaseOpts: {
            backgroundColor: '#140d0c',
            tooltip:{
                trigger:'item'
            },

            radar: {
                name: {
                    formatter:'{value}',
                    textStyle: {
                       color:'#fff',
                        fontSize:'14'
                    }
                },


                //大小
                radius: 120,

                splitNumber: 12,
                //分隔区域
                splitArea:{
                    show:false,
                    areaStyle:{
                        color: [
                            '#fff',
                            '#fff'
                        ]
                    }
                },

                //分隔线
                splitLine:{
                    lineStyle: {
                        color: '#968a7c'
                    }
                },

                //坐标线
                axisLine:{
                    lineStyle:{
                        color:"#968a7c"
                    }
                },

                //此数据由服务端提供
                indicator:[]
            },
            series: [
                {
                type: 'radar',
                symbolSize:0.5,

                itemStyle: {
                    normal: {
                        width:0,
                        color: '#83715d'
                    }
                },
                areaStyle: {
                    normal: {
                        color: '#83715d'
                    }
                },
                label: {
                    normal: {
                        show: true,
                        position:'inside',
                        textStyle:{
                            color: '#f5aa43',
                            fontSize:14,
                            fontFamily:"Arial"
                        }
                       /* formatter:function(params) {
                            var val=params.value;
                            if(val<=1){
                                val=(val*100).toFixed(0)+"%";
                            }
                            return val
                        }*/
                    }
                },

                //此数据由服务端提供
                data : []
            }]
        },
        radarBase:function(){
            var me=this;


            var leftRadar = echarts.init(document.getElementById('playerRadar'));
            var leftOpts = $.extend(true,{}, me.radarBaseOpts);

            leftOpts.series[0].data[0]= {
                value : [0.43, 100, 0.28, 0.35, 0.5],
                name: 'Peanut'
            };
            leftOpts.radar.indicator= [
                { name: 'Carry\n(43%)', max: 1},
                { name: '补刀@15\n(100)', max: 300},
                { name: '赢线率\n(28%)', max: 1},
                { name: '输线率\n(35%)', max: 1},
                { name: 'Troll/送头\n(50%)', max: 1}
            ];

            leftRadar.setOption(leftOpts);
        },




        /*选手对比*/
        radarCompareOpts: {


            //滑入时，显示的提示框
            tooltip:{
                trigger:'item',
                backgroundColor:'#000',
                padding:[5 ,10]
            },

            radar: {

                //指示器名称
                name: {
                    formatter:'{value}',
                    textStyle: {
                        color:'rgba(255, 255, 255, 1)',
                        fontSize:'14'
                    }
                },

                nameGap:0,

                //图形半径大小
                radius: 120,

                //分隔线数量
                splitNumber: 12,


                //分隔区域样式
                splitArea:{
                    show:false
                },

                //分隔线，边框线
                splitLine:{
                    lineStyle: {
                        color: '#453c36'
                    }
                },

                //坐标线，即以中心向处发出的半径线
                axisLine:{
                    lineStyle:{
                        color:"#453c36"
                    }
                },

                //数据
                indicator:[]
            },
            series: [
                {
                    type: 'radar',

                    //red

                    //拐点类型
                    symbol:'circle',

                    //拐点大小
                    symbolSize:5,


                    //拐点样式
                    itemStyle: {
                        normal: {
                            width:5,
                            color: 'rgba(255,37,36,1)'
                        }
                    },

                    //线条样式
                    lineStyle: {
                        normal: {
                            width:1,
                            color: 'rgba(184,10,9,1)',
                            type: 'solid'
                        }
                    },


                    //区域填充样式
                    areaStyle: {
                        normal: {
                            color: 'rgba(95,32,41,1)'
                        }
                    },



                    //此数据由服务端提供
                    data : []
                },

                {
                    type: 'radar',

                    //bule

                    //拐点类型
                    symbol:'circle',

                    //拐点大小
                    symbolSize:5,


                    //拐点样式
                    itemStyle: {
                        normal: {
                            width:5,
                            color: 'rgba(30,102,183,1)'
                        }
                    },

                    //线条样式
                    lineStyle: {
                        normal: {
                            width:1,
                            color: 'rgba(17,72,183,1)',
                            type: 'solid'
                        }
                    },


                    //区域填充样式
                    areaStyle: {
                        normal: {
                            color: 'rgba(30,102,183,.4)'
                        }
                    },

                    //此数据由服务端提供
                    data : []
                }
            ]
        },
        radarCompare:function(){
            var me=this;

            //左
            var leftRadar = echarts.init(document.getElementById('compareChart'));
            var leftOpts = $.extend(true,{}, me.radarCompareOpts);

            leftOpts.series[0].data[0]= {
                value : [0.43,.25, 0.28, 0.35, 0.5],
                name: 'Peanut'
            };
            leftOpts.series[1].data[0]= {
                value : [0.53,.8, 0.68, 0.15, 0.46],
                name: 'Smeb'
            };
            leftOpts.radar.indicator= [
                { name: '一血\n(60%：43%)', max: 1},
                { name: '一龙\n(60%：43%)', max: 1},
                { name: '一男爵\n(60%：43%)', max: 1},
                { name: '一塔\n(60%：43%)', max: 1},
                { name: '一兵营\n(60%：43%)', max: 1}
            ];

            leftRadar.setOption(leftOpts);
        },


        /*价格走势*/
        lineOpts:{

            //提示框
            tooltip : {
                trigger: 'axis',
                padding: 10,
                backgroundColor:'#a94f3f',
                axisPointer: {type:'line',lineStyle: { color: '#a94f3f' }},
                textStyle : {  color: '#fff'},
                formatter: function(){
                    var curLang=LOLMatrix.common.getLang();
                    var str= lineOptsLang[curLang];
                    return str
                }()
            },

            //图表大小及边距设置
            grid: { left: '5%',top:'5%', right: '2%', bottom: '10%'},

            xAxis : {
                type : 'category',
                axisLine: { lineStyle: { color: '#3e3b3d', width: 2 },onZero: false },
                splitLine: {lineStyle: { color: '#3e3b3d',width:2}},
                axisTick: { show: false },
                axisLabel :{
                    textStyle: { color: '#ffffff' },
                    formatter:  function(value,idx){
                        idx++;
                        if(idx<10){
                            return '0'+(idx);
                        }else{
                            return idx;
                        }
                    }
                },
                boundaryGap : false,
                data:[]
            },

            yAxis : {
                type : 'value',
                axisLine : {lineStyle: { color: '#3e3b3d', width: 2 }},
                splitLine: {  lineStyle: { color: '#3e3b3d', type: 'dotted' }}, //dotted,dashed
                axisTick: { show: false },
                axisLabel: {
                    formatter: function (value) {
                        if (value > 10000) {
                            return parseInt(value / 1000) + " k ";
                        } else {
                            return value;
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },

                boundaryGap : false,
                scale: true
                },


            //数据
            series : [
                {
                    type:'line',
                    smooth:true,

                    //拐点类型
                    symbol:'circle',

                    //拐点大小
                    symbolSize:8,


                    //拐点样式
                    itemStyle: {
                        normal: {
                            borderWidth:2,
                            color: '#c5ad8d',
                            borderColor:'#fff'
                        }
                    },

                    //线条样式
                    lineStyle : {  normal: { color: '#cc5132'}},

                    //文本标签
                    label: {
                        normal: {
                            show: true,
                            textStyle:  { fontFamily: "Arial,Microsoft YaHei", fontSize: 10,color:"#d35642"}
                        }
                    },



                    data:[]
                }
            ]
        },
        linePrice:function(){

            //获取点数据
            function getData(li) {
                var data = $.trim(li.attr("data-str")), arr = [];
                if (data) {
                    data = data.split(",");
                    $.each(data, function (index, item) {
                        arr.push(item * 1);
                    });
                }
                console.log(arr);
                return arr;
            }

            //获取x轴坐标数据
            function getXData(li) {
                var data = [];
                var num = li.attr("data-num") * 1;
                for (var i = 1; i <= num; i++) {
                    data.push(i);
                }
                return data;
            }



            //set opts data
            function setOptsData(li, opts) {

                //series data
                opts.series[0].data =getData(li);

                //x axis data
                opts.xAxis.data=getXData(li);

                return opts;
            }

            //update chat header content
            function updateChatHeader(header,li) {
                var
                    price = $(".price p", header),
                    priceChange = $(".price-change p", header),
                    pricePercent = $(".price-percent p", header);

                var
                    data = getData(li),
                    len=data.length;


                //price
               // var priceVal = data[len - 1];
                var priceVal = data[0];
                if (priceVal / 1000 > 10) {
                    price.html(parseInt(priceVal * 1 / 1000) + "k");
                } else {
                    price.html(priceVal);
                }

                //price change and price change percent;
                var changeVal = data[len - 1] - data[0];
                var percentVal = (changeVal / priceVal).toFixed(2);
                var cls = { up: 'price-up', down: "price-down" };

                if (changeVal > 0) {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(parseInt(changeVal / 1000) + "k");
                    } else {
                        priceChange.addClass(cls.up).removeClass(cls.down).html(changeVal);
                    }
                    pricePercent.addClass(cls.up).removeClass(cls.down).html(percentVal + "%");

                } else {
                    if (priceVal / 1000 > 10) {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(parseInt(changeVal / 1000) * -1 + "k");
                    } else {
                        priceChange.addClass(cls.down).removeClass(cls.up).html(changeVal * -1);
                    }
                    pricePercent.addClass(cls.down).removeClass(cls.up).html(percentVal * -1 + "%");
                }
            }


            //show chat and update chat header content
            function showChat(chat,curLi,opts,chatHeader) {
                if (chat) {
                    chat.clear();
                    chat.setOption(setOptsData(curLi, opts));
                }
                updateChatHeader(chatHeader, curLi);
            }


            //===============================================
            var me=this;
            var playersList =  {
                lis: $("span", $("#playerRecordLineBtns")),
                header:$("#playerRecordHeader")
            };





            //first load
            var
                curLi = playersList.lis.filter(".cur"),
                pChart = echarts.init(document.getElementById('playerRecordLineChart')),
                pOpts = $.extend(true, {}, me.lineOpts);

            showChat(pChart, curLi, pOpts, playersList.header);



            //click li
            playersList.lis.on("click", function () {
                curLi = $(this);
                curLi.addClass("cur").siblings().removeClass("cur");
                showChat(pChart, curLi, pOpts, playersList.header);
            });


        },


        /*散点图*/
        scatterOpts:{
            color: ['#c5ad8d', '#c1ffc9'],
            grid: { left: '3%',top:'5%', right: '2%', bottom: '0%',containLabel:true},

            //提示框
            tooltip : {
                trigger: 'axis',
                padding: 10,
                backgroundColor:'#a94f3f',
                axisPointer: {type:'cross',crossStyle: { color: '#6c6c6c',type:"solid", width: 2, shadowBlur: 0,shadowColor:'#244662' } },
                textStyle : {  color: '#fff'},
                formatter: function (params) {
                    var val=params.value || [];
                    if(val[2]){
                        return val[2]+"："+(val[0]*100).toFixed(1)+"%";
                    }else{
                        return (val[0]*100).toFixed(2)+"%";
                    }
                }
            },
            xAxis: {
                type: 'value',
                axisLine: { lineStyle: { color: '#3f3c3e', width: 2 } },
                splitLine: {show: false},
                axisTick: { show: true, lineStyle: { color: '#3f3c3e', width: 2 }},
                axisLabel :{
                    formatter: function (value, index) {
                        // 格式化 n%
                        if(value>0){
                            return value *100+"%"
                        }else{
                            return value
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },
                boundaryGap: false,
                max: 1
            },
            yAxis: {
                type: 'value',
                axisLine : {lineStyle: { color: '#3f3c3e', width: 2 }},
                splitLine: { lineStyle: { color: '#3f3c3e', type: 'dashed'}}, //dotted,dashed
                axisTick: { show: false },
                axisLabel: {
                    formatter: function (value) {
                        if (value > 10000) {
                            return parseInt(value / 1000) + " k ";
                        } else {
                            return value;
                        }
                    },
                    textStyle: { color: '#ffffff' }
                },
                scale: true
            },
            series: [
                {
                    type: 'scatter',

                    //点大小
                    symbolSize:10,

                    //数据
                    data: []
                },

                //当前成员
                {
                    type: 'scatter',


                    //点大小
                    symbolSize:15,

                    //标注
                    markPoint:{
                        symbol:"pin",
                        symbolSize:70,
                        itemStyle:{
                            normal:{  color:'#cc5132', opacity:.7 }
                        },
                        label:{
                            normal:{
                                show:true,
                                textStyle:{
                                    color:'#ffffff',
                                    fontSize:14
                                }

                            },
                            emphasis:{
                                show:true,
                                textStyle:{
                                    color:'#ffffff',
                                    fontSize:14
                                }

                            }
                        },
                        tooltip : {  show:false},
                        data: [
                            {coord: []}
                        ]
                    },

                    //数据
                    data: [ ]
                }


            ]
        },
        scatterChart:function(){
            var me=this;

           //初始化图形
            var scatter = echarts.init(document.getElementById('playerRecordScatter'));
            var opts = $.extend(true,{}, me.scatterOpts);
            scatter.setOption(opts);


            var
                tab=$("#playerRecordScatterTab"),
                lis=$("li",tab),
                curLi=$("li.cur",tab),
                curParam= {
                    data:{ type:curLi.data('type') }
                };

            //获取数据
            function getData(opts){

                //参数
                var defaultOpts={
                    url:'/_data/data.json',
                    data:{  type:''},
                    dataType: "json",
                    async: true,
                    timeout: 60000
                };
                var settings = $.extend(true, defaultOpts, opts);

                //send request
                return $.ajax(settings).then(
                    function(resData){
                        //服务端  success=false 时；
                        if(!resData.success){
                            //todo  show msg
                            return false;
                        }
                        return resData
                    }
                    ,function(xhrData){
                        return xhrData;
                    }
                );
            }

            //填充数据
            function fillData(param){
                //显示 loading
                scatter.showLoading({
                    text: '',
                    color: '#4aa5c4',
                    textColor: '#fff',
                    maskColor: '#05182b'
                });
                getData(param).then(
                    function (data) {
                        //有数据
                        if (data) {
                            scatter.hideLoading();
                            scatter.setOption({
                                series:[
                                    { data:data.allPlayers },
                                    {
                                        data:data.curPlayer,
                                        markPoint:{
                                            data: [
                                                {coord: data.curPlayer[0]}
                                            ]
                                        }
                                    }
                                ]
                            });
                        }

                        $(".fail-text").addClass('hide');
                    }
                    ,function(){
                        scatter.hideLoading();
                        $(".fail-text").removeClass('hide');
                        $(".fail-text>span").off("click").on("click",function(){
                            fillData(curParam);
                        });
                    }
                );
            }


            //初始加载
            fillData(curParam);

            //切换tab
            lis.on("changetab",function(){
                curParam= {
                    data:{ type:$(this).data('type')}
                };
                fillData(curParam);
            });
        }
    };
})();




$(function(){
    var playersDetail=LOLMatrix.playersDetail;
    playersDetail.radarBase();
    playersDetail.radarCompare();
    playersDetail.linePrice();
    playersDetail.scatterChart();


    //
    $(function(){
        var box=$(".head");
        var body=$(".body");
        box.click(function(){
            var curLi=$(this);
            var index=box.index(this);
            console.log(index);
            body.eq(index).show().siblings().hide()
            $("[name=hie]").attr("class","cur-no");
            $(this).attr("class","cur");
        })
    })



});
